<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="f" uri="/WEB-INF/functions.tld" %>

<h1 class="page-header">${requestedGrant.grantName}
    <c:if test="${not empty sessionUser}">
        <c:if
                test="${f:isUserLikeByLogin(requestedGrant,sessionUser.userLogin) eq null}">
            <button type="button" class="btn btn-default like"
                    id="like${requestedGrant.grantId}" data-loading-text="Loading..."
                    onclick="like(${requestedGrant.grantId}, '../like/')">
                I want help! <span class="badge pull-rigth"
                                   id="likeCount${requestedGrant.grantId}">${requestedGrant.likes.size()}</span>
            </button>
        </c:if>
        <c:if
                test="${f:isUserLikeByLogin(requestedGrant,sessionUser.userLogin) ne null}">
            <button type="button" class="btn btn-success like"
                    id="like${requestedGrant.grantId}" data-loading-text="Loading..."
                    onclick="like(${requestedGrant.grantId}, '../like/')">
                You want help now. <span class="badge pull-rigth"
                                         id="likeCount${requestedGrant.grantId}">${requestedGrant.likes.size()}</span>
            </button>
        </c:if>

        <a class="btn btn-primary"
           onClick="startMoneyTransfer(${requestedGrant.grantId})">Send
            Money</a>
        <c:if test="${sessionUser.role.roleName eq 'ROLE_ADMIN'}">
            <button class="btn btn-danger" onClick="startMoneyTransferFromFund(${requestedGrant.grantId})">Send money
                from Fund
            </button>
        </c:if>
        <c:if test="${requestedGrant.user.userId eq sessionUser.userId}">
            <a class="btn btn-warning" href="<c:url value="/grant/finish/${requestedGrant.grantId}"/>">Finish</a>
        </c:if>
    </c:if>
</h1>

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#content" role="tab" data-toggle="tab">Content</a></li>
    <li><a href="#info" role="tab" data-toggle="tab">Information</a></li>
    <li><a href="#changelog" role="tab" data-toggle="tab">Changelog <span
            class="badge">${requestedGrant.changelog.size()}</span></a></li>
    <li><a href="#comments" role="tab" data-toggle="tab">Comments <span
            class="badge">${requestedGrant.comments.size()}</span></a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane" id="info">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <h3>Information</h3>
                    <table width="100%">
                        <tr>
                            <td style="text-align: center;"><b>Days to go:</b></td>
                            <td>
                                <div class="big-letters">
                                    <b>${requestedGrant.daysToGo}</b>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center;"><b>Money needed:</b></td>
                            <td>
                                <div class="big-letters">
                                    <b><fmt:formatNumber type="CURRENCY"
                                                         value="${requestedGrant.requestedMoney}" groupingUsed="true"
                                                         currencySymbol="$"/></b>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center;"><b>Money recieved:</b></td>
                            <td>
                                <div class="big-letters">
                                    <b><fmt:formatNumber type="CURRENCY"
                                                         value="${requestedGrant.moneyAmount}" currencySymbol="$"/></b>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center;"><b>Recieved money from fund:</b></td>
                            <td>
                                <div class="big-letters">
                                    <b><fmt:formatNumber type="CURRENCY"
                                                         value="${requestedGrant.amountFromFund}"
                                                         currencySymbol="$"/></b>
                                </div>
                            </td>
                        </tr>
                    </table>

                </div>
                <div class="col-md-6">
                    <h3>Wants help:</h3>
                    <c:forEach items="${requestedGrant.likes}" var="like">
                        <a href="<c:url value="/profile/${like.user.userId}" />">${like.user.userLogin}</a>,
                    </c:forEach>
                </div>
            </div>
            <div class="row">

                <div class="col-md-6">
                    <h3>TOP-5 Investitions</h3>
                    <table class="table table-stripped">
                        <c:forEach items="${requestedGrant.moneyTransfer}"
                                   var="moneyTransfer" end="4">
                            <tr>
                                <td><a
                                        href="<c:url value="/profile/${moneyTransfer.user.userId}"/>">
                                        ${moneyTransfer.user.userLogin} </a></td>
                                <td><fmt:formatNumber type="CURRENCY"
                                                      value="${moneyTransfer.moneySum}" currencySymbol="$"/></td>
                            </tr>
                        </c:forEach>
                    </table>
                </div>

            </div>
        </div>

    </div>
    <div class="tab-pane active" id="content">

        <small>Added by: ${requestedGrant.user.userLogin}</small>
        <p>${requestedGrant.requestDescription}</p>

    </div>
    <div class="tab-pane" id="changelog">
        <c:if test="${sessionUser.userId eq requestedGrant.user.userId}">
            <button class="btn btn-primary" onClick="expandChangelog()">Write to changelog.</button>

            <div class="hidden-changelog-area">

                <form class="form-vertical" action="<c:url value="/grant/writeChangelog"/>" METHOD="POST">


                    <div class="form-group">
                        <label for="changelogText">Input contents of update</label>
                        <input type="hidden" id="changelogText" name="grantId" value="${requestedGrant.grantId}"/>
                        <textarea class="form-control" name="changelogText" rows="10"></textarea>
                    </div>

                    <button class="btn btn-default" type="submit">Write</button>

                </form>
            </div>
        </c:if>
        <c:if test="${not empty requestedGrant.changelog}">

            <div class="">
                <c:forEach items="${requestedGrant.changelog}" var="feedOne">
                    <div class="media">
                        <div class="pull-left">
                            <img src="${feedOne.grantApplication.user.avaPath}" width="72px" class="thumbnail"/>
                        </div>
                        <div class="media-body">

                            <div class="media-heading">
                                <a href="<c:url value="/profile/${feedOne.grantApplication.user.userId}"/>">${feedOne.grantApplication.user.userLogin}</a>
                                has updated project at <fmt:formatDate value="${feedOne.date}"
                                                                       pattern="dd.MM.yyyy, hh:mm"/>:
                            </div>
                            <c:out value="${feedOne.text}" escapeXml="false"/>
                            <hr>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </c:if>
    </div>

    <div class="tab-pane" id="comments">
        <c:if test="${not empty sessionUser}">
            <form action="" id="commentForm" method='POST'
                  class="form-horizontal">
                <div class="form-group">
                    <br> <label class="col-md-2 control-label" name="commentText">New
                    Comment:</label>

                    <div class="col-md-8">
                        <textarea id="commentText" name="commentText" class="form-control"></textarea>
                    </div>
                    <div class="col-sm-1">
                        <button type="submit" class="btn btn-primary">Send
                            Comment
                        </button>
                    </div>
                </div>


            </form>
        </c:if>
        <c:if test="${empty sessionUser}">
            <h3 class="text-center">
                You should be <a href="<c:url value="/login" /> ">logged in</a> to
                send a comment
            </h3>
        </c:if>
        <c:forEach items="${requestedGrant.comments}" var="comment">

            <div class="media">
                <a class="pull-left" href="#"> <c:if
                        test="${ not empty comment.user.avaPath}">
                    <img class="media-object" src="${comment.user.avaPath}"
                         alt="${comment.user.userLogin}" width="64px" height="64"
                         class="img-thumbnail"/>
                </c:if> <c:if test="${empty comment.user.avaPath}">
                    <img class="media-object"
                         src="https://vk.com/images/camera_200.gif"
                         alt="${comment.user.userLogin}" width="64px" height="64"
                         class="img-thumbnail"/>
                </c:if>
                </a>

                <div class="media-body">
                    <h4 class="media-heading">
                        Added by <a
                            href="<c:url value="/profile/${comment.user.userId}" />"> <c:out
                            value="${comment.user.userLogin}"/>

                    </a> at
                        <fmt:formatDate value="${comment.commentDate}" dateStyle="MEDIUM"
                                        type="BOTH"/>
                        <c:if test="${sessionUser.role.roleName eq 'ROLE_ADMIN'}">
                            <a
                                    href="<c:url value="/grant/deleteComment/${comment.commentId}" />"><span
                                    class="glyphicon glyphicon-remove"></span></a>
                        </c:if>
                    </h4>

                    <c:out value="${comment.commentText}" escapeXml="false"/>

                </div>
            </div>
        </c:forEach>
    </div>

</div>

<script>
    function startMoneyTransfer(id) {
        $("#moneyTransferModal").modal();
    }
    function expandChangelog() {
        $(document).unbind("click");
        $(".hidden-changelog-area").show("slow");
        $(".overlay").show("slow");
        setTimeout(setCloser, 1000);
    }

    function setCloser() {
        $(document).click(function (event) {
            if ($(event.target).closest(".hidden-changelog-area").length) return;
            $(document).unbind("click");
            $(".overlay").hide("slow");
            $(".hidden-changelog-area").hide("slow");
            event.stopPropagation();

        });
    }
    function startMoneyTransferFromFund(id) {
        $("#moneyTransferFromFundModal").modal();
    }
    function sendMoney() {
        var amount = parseInt($("#moneyAmount").val());
        if (amount > 0) {
            console.log(amount);
            $.ajax({
                type: "POST",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Accept", "application/json");
                    xhr.setRequestHeader("Content-Type", "application/json");
                },
                data: JSON.stringify({
                    grantId: 1
                }),
                url: "../money/transfer",
                success: function () {
                    $("#moneyTransferModal").close();
                }
            })
        } else {
            alert("0");
        }
    }


</script>

<div class="modal fade" id="moneyTransferModal" tabindex="-1"
     role="dialog" aria-labelledby="moneyTransferLabel" aria-hidden="true">


    <div class="modal-dialog">
        <form
                action="<c:url value="/money/grant/${requestedGrant.grantId}"/> "
                id="moneyForm" method='POST' class="form-horizontal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="moneyTranferLabel">
                        Send money to project ${requestedGrant.grantName}
                    </h4>
                </div>

                <div class="modal-body">

                    <div class="form-group">
                        <label class="col-sm-4 control-label">The amount of money</label>
                        <!--  <iframe frameborder="0" allowtransparency="true" scrolling="no"
                          src="https://money.yandex.ru/embed/shop.xml?account=410012443152692&quickpay=shop&payment-type-choice=on&writer=seller&targets=Donation&targets-hint=&default-sum=&button-text=03&fio=on&mail=on"
                          width="650" height="200"></iframe> -->
                        <div class="col-sm-7 input-group">
                            <span class="input-group-addon">$</span> <input type="number"
                                                                            id="moneyAmount" size="7" name="moneyAmount"
                                                                            value="0" min="0"
                                                                            class="form-control">
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" id="send" value="" class="btn btn-primart"/>
                    Send Money
                    </button>
                    <!-- <button onClick="sendMoney()" class="btn btn-primary" id="sendMoneyButton">Send Money</button> -->
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <div id="result"></div>
                </div>
            </div>
        </form>
    </div>
</div>


<div class="modal fade" id="moneyTransferFromFundModal" tabindex="-1"
     role="dialog" aria-labelledby="moneyTransferFromFundLabel" aria-hidden="true">

    <c:if test="${not empty sessionUser}">
    <c:if test="${sessionUser.role.roleName eq 'ROLE_ADMIN'}">
    <div class="modal-dialog">
        <form
                action="<c:url value="/admin/sendMoney/"/> "
                id="moneyTransferToGrantForm" method='POST' class="form-horizontal">

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="moneyTransferFromFundLabel">Send money to
                        project ${requestedGrant.grantName} from Investement Fund</h4>
                </div>

                <div class="modal-body">
                    Available money in Grant Area: ${areaMoneyAmount}
                    <input type="hidden" name="grantId" value="${requestedGrant.grantId}">

                    <div class="form-group">
                        <label class="col-sm-4 control-label">The amount of money</label>
                        <!--  <iframe frameborder="0" allowtransparency="true" scrolling="no"
                          src="https://money.yandex.ru/embed/shop.xml?account=410012443152692&quickpay=shop&payment-type-choice=on&writer=seller&targets=Donation&targets-hint=&default-sum=&button-text=03&fio=on&mail=on"
                          width="650" height="200"></iframe> -->
                        <div class="col-sm-7 input-group">
                            <span class="input-group-addon">$</span> <input type="number"
                                                                            id="moneyAmountToGrant" size="7"
                                                                            name="moneyAmount" value="0" min="0"
                                                                            class="form-control">
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" id="send" value="" class="btn btn-primart"/>
                    Send Money
                    </button>
                    <!-- <button onClick="sendMoney()" class="btn btn-primary" id="sendMoneyButton">Send Money</button> -->
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </form>
    </div>
    </c:if>
    </c:if>

